<template>
<div class="citysearch">
  <div class="search">
    <div class="header-city-botton">
        <span class="iconfont">&#xe644;</span>
        <input type="text" placeholder="输入城市名或拼音" v-model="keyword">
        <!-- <span class="value">输入城市名或拼音</span> -->
      </div>
  </div>
  <div class="search-content" ref="wrapper1" v-show="keyword">
      <ul>
        <li class="search-item border-bottom" 
        v-for="item in list" 
        :key="item.id" 
        @click="haddleCityName(item.name)">
        {{item.name}}</li>
        <li class="search-item border-bottom" v-show="!this.list.length">还没有搜索</li>
      </ul>
  </div>
</div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CitySearch',
  props:{
    cities:Object
  },
  data(){
    return{
      keyword:'',
      list:[],
      timer:null
    }
  },
  watch:{
    keyword(){
      if(this.timer){
        clearTimeout(this.timer)
      }
      if(!this.keyword){
        this.list=[]
        return
      }
      this.timer = setTimeout(()=>{
        const result=[]
        for(let i in this.cities){
          // console.log(this.cities[i]) //array
          this.cities[i].forEach((value)=>{
            // console.log(value)     //object
            if(value.spell.indexOf(this.keyword) >=0 || value.name.indexOf(this.keyword) >=0){
              result.push(value)
            }
          })
        }
        this.list=result
      },100)
    }
  },
  mounted(){
    // console.log(this.$refs.wrapper1);
    this.scroll=new BScroll(this.$refs.wrapper1);
  },
  methods:{
      haddleCityName(city){
        // console.log(city)
        // this.$store.dispatch('changeCity',city)
        this.$store.commit('changeCity',city)
        this.$router.push('/')
      }
    }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/css/varibles.styl'
.border-bottom
  &::before
    border-color #ccc
.search 
  height .8rem
  background-color $bgColor 
  z-index 99

  .header-city-botton
    width 7rem
    flex 1
    background-color  #ffffff
    color  #333
    height  .66rem
    line-height  .66rem
    margin-left .14rem
    margin-right .14rem
    border-radius .2rem
    padding-left  .2rem
    color  #666
    .header-city-botton .value
      padding-left 1.4rem
.search-content
  z-index 1
  position absolute
  // overflow hidden
  top 1.7rem
  right 0
  left 0
  bottom 0 
  background-color #fff
  .search-item
      line-height .7rem
      padding 0 .2rem 
</style>